﻿@page "/ImageSvg"

@using System.Diagnostics.CodeAnalysis
 @inject IJSRuntime JS

<style>
    #imageContainer {
        position: relative;
        width: 600px; /* 根据需要设置 */
        height: 400px; /* 根据需要设置 */
        overflow: hidden;
    }

        #imageContainer img {
            display: block;
        }

        #imageContainer svg {
            position: absolute;
            top: 0;
            left: 0;
        }
</style>


<h3>ImageSvg </h3>

@* <div class="image-container">
    <img src="@imageUrl" alt="Background Image" style="display: block; width: 600px; height: 600px;" />
    <svg @ref="svgElement" style="display: block; width: 600px; height: 600px;">
        @foreach (var line in lines)
        {
            <line class="draggable-line" x1="@line.X1" y1="@line.Y1" x2="@line.X2" y2="@line.Y2" stroke="black" stroke-width="2" />
        }
    </svg>
</div> *@

<div id="imageContainer" style="position: relative; width: 600px; height: 400px;">
    <img src="@imageUrl" style="width: 100%; height: 100%; position: absolute; top: 0; left: 0;" />
    <svg @ref="svgElement" width="100%" height="100%" style="position: absolute; top: 0; left: 0;">
        <line class="draggable-line" x1="50" y1="50" x2="200" y2="200" stroke="black" stroke-width="2" />
    </svg>
</div>

<Button Text="Add New Line" OnClick="AddNewLine" />

@code {
    private string imageUrl = "";


    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();

    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        await JS.InvokeVoidAsync("import", "./svgInteractions.js");
        if (firstRender)
        {
            // 确保在DOM加载完成后添加事件监听器
            await JS.InvokeVoidAsync("initSvgInteractions", svgElement);
            StateHasChanged();
        }
    }


    private ElementReference svgElement;
    private List<Line> lines = new List<Line>();

    public class Line
    {
        public double X1 { get; set; }
        public double Y1 { get; set; }
        public double X2 { get; set; }
        public double Y2 { get; set; }
    }

    private void AddNewLine(MouseEventArgs args)
    {
        // 假设我们添加一条从(50,50)到(150,150)的直线作为示例
        lines.Add(new Line { X1 = 50, Y1 = 50, X2 = 150, Y2 = 150 });
        StateHasChanged();
    }

}
